<template>
    <div class="msg-box">
        <h2>通知提醒的偏好</h2>
        <el-checkbox label="停用通知" v-model="isSuspensionNotice" />

        <el-table :data="tableData" border>
            <!-- 第一列：作业类型 -->
            <el-table-column prop="type" label="" fixed />

            <!-- 第二列：网页弹出式通知 -->
            <el-table-column label="網頁彈出式通知" align="center">
                <el-table-column prop="webOnline" label="" width="80" align="center">
                    <template #default="{ row }">
                        <el-switch v-if="typeof row.webOnline === 'boolean'" v-model="row.webOnline" size="small" />
                        <span v-else>{{ row.webOnline }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="webOffline" label="" width="80" align="center">
                    <template #default="{ row }">
                        <el-switch v-if="typeof row.webOffline === 'boolean'" v-model="row.webOffline" size="small" />
                        <span v-else>{{ row.webOffline }}</span>
                    </template>
                </el-table-column>
            </el-table-column>

            <!-- 第三列：Email -->
            <el-table-column align="center">
                <template #header>
                    <div class="t-head-box">
                        Email
                        <el-icon size="16" color="#000"><Setting /></el-icon>
                    </div>
                </template>
                <el-table-column prop="emailOnline" label="" width="80" align="center">
                    <template #default="{ row }">
                        <el-switch v-if="typeof row.emailOnline === 'boolean'" v-model="row.emailOnline" size="small" />
                        <span v-else>{{ row.emailOnline }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="emailOffline" label="" width="80" align="center">
                    <template #default="{ row }">
                        <el-switch v-if="typeof row.emailOffline === 'boolean'" v-model="row.emailOffline" size="small" />
                        <span v-else>{{ row.emailOffline }}</span>
                    </template>
                </el-table-column>
            </el-table-column>

            <!-- 第四列：行动装置 -->
            <el-table-column align="center">
                <template #header>
                    <div class="t-head-box">
                        行動裝置
                        <el-icon size="16" color="#000"><Setting /></el-icon>
                    </div>
                </template>
                <el-table-column prop="mobileOnline" label="" width="80" align="center">
                    <template #default="{ row }">
                        <el-switch v-if="typeof row.mobileOnline === 'boolean'" v-model="row.mobileOnline" size="small" />
                        <span v-else>{{ row.mobileOnline }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="mobileOffline" label="" width="80" align="center">
                    <template #default="{ row }">
                        <el-switch v-if="typeof row.mobileOffline === 'boolean'" v-model="row.mobileOffline" size="small" />
                        <span v-else>{{ row.mobileOffline }}</span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isSuspensionNotice = ref(false)
const preferences = ref([{}])

const tableData = [
    {
        type: '作業',
        webOnline: '線上',
        webOffline: '離線',
        emailOnline: '線上',
        emailOffline: '離線',
        mobileOnline: '線上',
        mobileOffline: '離線',
    },
    {
        type: '作業的通知',
        webOnline: false,
        webOffline: false,
        emailOnline: false,
        emailOffline: false,
        mobileOnline: false,
        mobileOffline: false,
    },
    {
        type: '回饋單',
        webOnline: '線上',
        webOffline: '離線',
        emailOnline: '線上',
        emailOffline: '離線',
        mobileOnline: '線上',
        mobileOffline: '離線',
    },
    {
        type: '回饋單通知',
        webOnline: true,
        webOffline: true,
        emailOnline: true,
        emailOffline: true,
        mobileOnline: true,
        mobileOffline: true,
    },
    {
        type: '回饋提醒者',
        webOnline: true,
        webOffline: true,
        emailOnline: true,
        emailOffline: true,
        mobileOnline: true,
        mobileOffline: true,
    },
    {
        type: '討論區',
        webOnline: '線上',
        webOffline: '離線',
        emailOnline: '線上',
        emailOffline: '離線',
        mobileOnline: '線上',
        mobileOffline: '離線',
    },
    {
        type: '訂閱的討論區貼文',
        webOnline: true,
        webOffline: true,
        emailOnline: true,
        emailOffline: true,
        mobileOnline: true,
        mobileOffline: true,
    },
    {
        type: '訂閱的討論區摘要',
        webOnline: true,
        webOffline: true,
        emailOnline: true,
        emailOffline: true,
        mobileOnline: true,
        mobileOffline: true,
    },
    {
        type: '編序學習',
        webOnline: '線上',
        webOffline: '離線',
        emailOnline: '線上',
        emailOffline: '離線',
        mobileOnline: '線上',
        mobileOffline: '離線',
    },
    {
        type: '學習單元的問答題已經計分的通知',
        webOnline: true,
        webOffline: true,
        emailOnline: true,
        emailOffline: true,
        mobileOnline: true,
        mobileOffline: true,
    },
    {
        type: 'Reengagement',
        webOnline: '線上',
        webOffline: '離線',
        emailOnline: '線上',
        emailOffline: '離線',
        mobileOnline: '線上',
        mobileOffline: '離線',
    },
    {
        type: 'Re-engagement notifications',
        webOnline: true,
        webOffline: true,
        emailOnline: true,
        emailOffline: true,
        mobileOnline: true,
        mobileOffline: true,
    },
]
</script>

<style lang="less" scoped>
.msg-box {
    h2 {
        margin-bottom: 30px;
        font-size: 30px;
        font-weight: normal;
        line-height: 1.2;
        color: #000;
    }

    :deep(.el-table) {
        margin-top: 30px;
        width: 100%;
        font-size: 12px;

        --el-table-header-text-color: #000;
        --el-table-text-color: #212529;

        .el-table__inner-wrapper {
            .el-table__header-wrapper {
                .el-table__header {
                    thead {
                        tr {
                            .t-head-box {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 10px;
                            }

                            &:last-child {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
